<template>
	<view class="agreement-page">
		<view class="navbar">
			<view class="title">{{ pageTitle }}</view>
		</view>
		<scroll-view class="content" scroll-y>
			<view class="agreement-content">
				<view class="main-title">{{ pageTitle }}</view>
				<view class="update-date">生效日期：2023年10月1日</view>
				<template v-if="type === 'service'">
					<view class="section">
						<view class="section-title">一、服务条款</view>
						<view class="section-content">
							<view class="paragraph">1.1 本服务由我们提供，您在使用前需同意本协议所有条款。</view>
							<view class="paragraph">1.2 我们有权根据业务需要更新服务内容，更新后将通过小程序公告通知您。</view>
						</view>
					</view>
					<view class="section">
						<view class="section-title">二、用户义务</view>
						<view class="section-content">
							<view class="paragraph">2.1 您应提供真实、准确的信息，如信息变更需及时更新。</view>
							<view class="paragraph">2.2 您不得利用本服务从事任何违法违规活动，否则我们有权终止服务。</view>
						</view>
					</view>
				</template>
				<template v-if="type === 'privacy'">
					<view class="section">
						<view class="section-title">一、信息收集</view>
						<view class="section-content">
							<view class="paragraph">1.1 为提供服务，我们会收集您的微信昵称、头像及手机号（用于账号绑定）。</view>
							<view class="paragraph">1.2 我们不会收集与服务无关的信息，也不会向第三方泄露您的信息。</view>
						</view>
					</view>
					<view class="section">
						<view class="section-title">二、信息使用</view>
						<view class="section-content">
							<view class="paragraph">2.1 收集的信息仅用于为您提供服务，如身份验证、业务通知等。</view>
							<view class="paragraph">2.2 您可随时联系我们查询或删除您的个人信息。</view>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	const type = ref('service')
	const pageTitle = ref('用户服务协议')
	
	const onLoad = (options) => {
		if (options.type === 'privacy') {
			type.value = 'privacy'
			pageTitle.value = '隐私政策'
		}
	} 
	
	// 暴露onLoad方法给uni-app
	defineExpose({
		onLoad
	})
</script>
<style lang="scss" scoped>
	.agreement-page {
		min-height: 100vh;
		background-color: #fff;
	}

	.navbar {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #eee;
		position: relative;

		.title {
			font-size: 34rpx;
			font-weight: 500;
			color: #333;
		}
	}

	.content {
		height: calc(100vh - 100rpx);
		width: 100%;

		.agreement-content {
			padding: 40rpx 30rpx;
			
			.main-title{
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
				text-align: center;
				margin-bottom: 20rpx;
			}
			.update-date {
			  font-size: 24rpx;
			  color: #999;
			  text-align: center;
			  margin-bottom: 40rpx;
			}
			
			.section {
				margin-bottom: 30rpx;
				
				.section-title {
					font-size: 30rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.section-content {
					.paragraph {
						font-size: 26rpx;
						color: #666;
						line-height: 1.6;
						margin-bottom: 15rpx;
					}
				}
			}
		}
	}
</style>